<script setup lang="ts">
import {Page, useVbenModal} from '@vben/common-ui'
import {useVbenVxeGrid} from "#/adapter/vxe-table";
import {form_schema, tableConfig,p_options} from "#/views/toc/category/data";
import {useVbenForm} from "#/adapter/form";
import {requestClient} from "#/api/request";
const [Grid,gridApi]=useVbenVxeGrid({
  gridOptions:tableConfig
})
const [Modal,modalApi]=useVbenModal({
  destroyOnClose: true,
  onOpenChange:async (isOpen)=>{
    if (isOpen){
      const l:any[]=[{value:0,label:'顶级'}]
      const d=await requestClient.get('/platform/app-category/list_by_pid',{params:{pid:0}})
      if(d){
        for (let e of d) {
          l.push({
            value:e.id,
            label:e.appCategoryName
          })
        }
      }
      //@ts-ignore
      p_options.value=l
    }
  },
  onConfirm:async ()=>{
    const { valid } = await formApi.validate();
    if (!valid) {
      return;
    }
    modalApi.lock();
    const data = await formApi.getValues();
    if(data.id){
      await requestClient.put('/platform/app-category/update', data)
    }else {
      if (!data.pid){
        data.pid=0
      }
      await requestClient.post('/platform/app-category/create',data)
    }
    //处理提交
    await modalApi.close();
    await gridApi.reload();
  }
})
const [Form,formApi]=useVbenForm({
  commonConfig: {
    componentProps: {
      class: 'w-full',
    },
  },
  showDefaultActions: false,
  layout: 'vertical',
  schema:form_schema,
})
const addChild=()=>{
  modalApi.open()
}
const edit=async (row:any)=>{
  await modalApi.open();
  await formApi.resetForm()
  await formApi.setValues(row,false)
}
</script>

<template>
  <page auto-content-height>
    <Grid>
      <template #toolbar-tools>
        <el-button @click="addChild">新增</el-button>
      </template>
      <template #option="{row}">
        <el-button link @click="edit(row)">修改</el-button>
      </template>
    </Grid>
    <Modal>
      <Form/>
    </Modal>
  </page>
</template>

<style scoped lang="scss">

</style>
